<template>
	<view>
		<vs-nav-bar  title="播放" @netstatus="netstatus" ></vs-nav-bar>
		<!-- <vs-ratio-view ratio="16/9"> -->
			<view style="position: relative;">
				<live-player @statechange="statechange" id="myVideo" style="width: 100%;" :src="info.url" autoplay>
					<cover-view style="width: 50rpx;height: 50rpx;position: absolute;right: 5px;bottom: 5px;z-index: 99;" >
						<cover-image @click="handleChange" :src="src?'../../../static/img/icon_fullcancel.png':'../../../static/img/icon_full.png'"></cover-image>
					</cover-view>
				</live-player>
			</view>
		<!-- </vs-ratio-view> -->
		<!-- <view style="font-size: 24rpx;color: #888;padding: 10px;">注意：如果加载不流畅，请先暂停视频后再次播放</view> -->
	</view>
</template>

<script>
	import {playVideo} from '@/api/homeapi'
	export default{
		data(){
			return{
				info:{},
				timer:null,
				src:false
				
			}
		},
		onUnload(){
			clearInterval(this.timer)
		},
		onLoad() {
			this.info=this.$Route.params.info
			this.livePlayerContext = uni.createLivePlayerContext('myVideo')
			this.timer=setInterval(()=>{
				playVideo({
					type:'applet',
					version:1,
					deviceId:uni.getStorageSync('userInfo').openId,
					sxtId:this.info.id
				}).then(res=>{
					if(res.code==1){
						// this.$fn.toast('继续观看')
					}else{
						clearInterval(this.timer)
						uni.showModal({
						    title: '提示',
						    content:res.data||'视频暂无法观看',
							showCancel:false,
						    success:res=>{
						        if (res.confirm) {
						            console.log('用户点击确定');
									this.$Router.back(1)
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
					
				})
			},10000)
			
		},
		methods:{
			handleChange(){
				// this.clearTimer()
					this.src?this.livePlayerContext.exitFullScreen():this.livePlayerContext.requestFullScreen({direction:90})
					this.src?(this.src = false) : (this.src = true)
			},
			clearTimer(){
				clearInterval(this.timer)
			},
			statechange(e){
				console.log(e);
			}
		}
	}
</script>

<style>
</style>
